<gm:page title="Hit for Six: The Ultimate Cricket Mashup" authenticate="false" onload="onLoad()">

     <!--
       A combination of cricket schedules, cricket scores, and cricket maps - plus news, calendars,
       and iGoogle gadgets.
       @author: Reto Meier
      -->

  <style>

   #gm-signin {
    display: none
   }
    
  .gm-section-tab {
      background-color: #444;     
      color: white;
      border:none;
  }
  
  .gm-section-tab-selected {
     background: #151515;     
     color:white;
     border:none;
  }
    
  .gm-section-tabs {
     border-bottom:10px solid #151515;

     padding:0pt 0pt 6px 8px;
   }
   
  .gm-table thead, .gm-table tfoot, .gm-header {
     color:white;
     font-size:12px;
   }  
  </style>

    <script type="text/javascript" language="javascript">  
    <![CDATA[
      var proc = false;
      var loopDone = true;
      var geoReq = 0;
      var geocoder = new GClientGeocoder();
      var matchCount = 0;
            
      var urlLocation = new GPath("gd:where/@valueString"); 

      function onLoad() {                       
        var venueMap = google.mashups.getObjectById('venueMap').getMap(); 

        setupMap(venueMap);           
      
        GEvent.addListener(venueMap, 'addoverlay', changeImage);      
      }       
      
      function changeImage(overlay) {
        if (overlay.setImage) {
          overlay.setImage('http://software.intervention.com.au/GDS/images/igCricketMarkera.png');
        }
      } 
      
      function setupMap(map) {
        map.enableDoubleClickZoom();
        map.enableContinuousZoom();
        map.setMapType(G_HYBRID_MAP);
      }            
      
      function selectVenueCountry() {
        var countries = google.mashups.getObjectById('countryList').getData();
        var country = google.mashups.getObjectById('countryList').getSelectedEntry();
        var urlGPath = new GPath('gsx:atomlink');

        var currDate = new Date();
        var monthVal = currDate.getMonth()+1;
        var dayVal   = currDate.getDate();
        var yearVal  = 7;//currDate.getYear();   
        if (dayVal.length == 1)           
          dayVal = '0' + dayVal;
      
        if (monthVal.length == 1)
          monthVal = '0' + monthVal;
                               
        var sqString = '?sq=Lat%3E-' + yearVal+monthVal+dayVal;
        
        var ctryString = urlGPath.getValue(country);// + sqString;
        google.mashups.getObjectById('venueList').setData(ctryString);         
      }       
      
      
    ]]></script>
    
   <div>
   <gm:tabs target="myContainer"/>       

    <gm:container id="myContainer" style="width:100%;">
      
      <gm:section id="sectionVenues" title="Cricket Ground Map">
        <table class="gm-padded" width="100%">
          <tr valign="top">
            <td width="408" style="padding-right:10px;>
              <div style="font-size:80%; height: 158px; padding-right:0px;">
                <div style="height: 150px; overflow:auto; margin-right:5px; margin-bottom: 5px;">
                  <gm:list id="countryList" data=http://spreadsheets.google.com/feeds/list/o01765357489133287312.3601895615788609870/od7/public/values?sq=Country%3E1 pagesize="50" template="countryListTemplate">              
                    <gm:handleEvent event="select" execute="selectVenueCountry();"/>                  
                  </gm:list>
                </div>
              </div>            
              <div style="font-size:80%; height: 413px; overflow: auto;">              
                <gm:list id="venueList" data="http://spreadsheets.google.com/feeds/list/o01765357489133287312.3601895615788609870/od6/public/values?sq=Lat%3E1" pagesize="100" template="venueListTemplate">
                  <gm:handleEvent src="venueMap" event="select"/>
                </gm:list> 
              </div>             
            </td>
            <td>
              <div style="height: 70px; overflow: auto;">
                <gm:item id="venueDetail" template="detailedVenue">                                 
                  <gm:handleEvent src="venueList" event="select"/>                  
                </gm:item>
              </div>                
              <div style="height: 520px; overflow: none;">              
                <gm:map id="venueMap" control="large" maptypes="true" height="520px" latref="gsx:lat" lngref="gsx:long" lat="30" lng="50" zoom="2" data="${venueList}" infotemplate="mapVenue">
                  <gm:handleEvent src="venueList" event="select"/>                  
                </gm:map>                 
              </div>
            </td>           
          </tr>
        </table>                
      </gm:section>
    </gm:container>  
  </div>
    
  <div id="footer"><font size="2" face="Verdana" color="black"><center>All times given in UTC. Live scores courtesy of <a href="http://www.cricinfo.com">CricInfo</a>, schedules copyright their respective organisations, courtesy of <a href="http://www.cricketarchive.com/">Cricket Archive</a> and <a href="http://www.cricinfo.com">CricInfo</a><br/>©2007 Reto Meier - <a href="http://blog.radioactiveyak.com">Radioactive Yak Software</a></center></font></div>              
    
   <gm:template id="detailedVenue">
    <table>
      <tbody repeat="true">
        <tr>
          <td><gm:image ref="gsx:imageurl"/></td>
          <td style="padding-left:5px"><b><gm:text ref="atom:title"/></b><br/>
                 <gm:text ref="gsx:fulllocation"/><br/>
                 <small><gm:link ref="gsx:officiallink" label="Official site"/>                
                        <gm:link ref="gsx:cricinfo" label="More details at CricInfo"/></small></td>
        </tr>        
      </tbody>
   </table>
  </gm:template>    
  
  <!-- Map Venue Template -->
   <gm:template id="mapVenue">
    <table width="250px">
      <tbody repeat="true">
        <tr>
          <td><b><gm:text ref="gsx:shortname"/></b><br/></td>
        </tr>
        <tr>
          <td><small><gm:text ref="gsx:description"/></small><br/></td>
        </tr>
        <tr>
         <td><center><gm:link imgref="gsx:widgetnumber" ref="gsx:widgetref"/></center><br/>
             <small><gm:link ref="gsx:localbom" label="Local Weather"/>
             <gm:link ref="gsx:rainradar" label="Rain Radar"/>
             <gm:link ref="gsx:webcamurl" label="Watch the Webcam"/></small></td>
        </tr>                
      </tbody>
   </table>
  </gm:template>      
    
  <!-- Country List Template -->
  <gm:template id="countryListTemplate">
    <table width="205" class="black-theme">
      <thead>                                
        <tr>
          <td>Cricket Grounds In</td>
        </tr>
      </thead>
      <tbody repeat="true">
        <tr>
          <td><small><gm:text ref="atom:title"/></small></td>
        </tr>     
      </tbody>
    </table>
  </gm:template>      
  
  <!-- Venue List Template -->
  <gm:template id="venueListTemplate">
    <table width="100%" class="black-theme">
      <thead>                                
        <tr>
          <td>Cricket Grounds and Stadiums</td>
        </tr>
      </thead>
      <tbody repeat="true">
        <tr>
          <td><small><gm:text ref="atom:title"/></small></td>
        </tr>     
      </tbody>
    </table>
  </gm:template>      
      
</gm:page>




